<template>
  <div>
		<Header :title="product.title"/>
		<PatchBox :list="topList"/>
		<div class="content">
			<aside class="aside-box aside-left">
				<Moudle title="生产成本分析">
					<Echarts class="h15" type="bar" :options="echarts[2]"/>
				</Moudle>
				<Moudle title="成品率">
					<div class="relative">
						<AsideBG title="今日"/>
						<Echarts :options="yieId"/>
					</div>
					<div class="relative">
						<AsideBG title="近一周"/>
						<Echarts class="h12" type="line" :options="echarts[1]"/>
					</div>
				</Moudle>
				<Moudle title="机组状态">
					<div class="fz2" v-for="item in product.units" :key="item.id">
						<router-link :to="{name: 'Unit', params:{unitId: item.id}}">
							{{item.title}}
						</router-link>
						<span>: {{item.status ? '开' : '关'}}</span>
					</div>
				</Moudle>
			</aside>
			<div class="center-box">
				<AGV class="map-box" :pos="pos"/>
				<Moudle title="计划完成情况">
					<div class="relative ib w2">
						<AsideBG title="今日"/>
						<Echarts :options="echarts[3]"/>
					</div>
					<div class="relative ib w8">
						<AsideBG title="近一周" :right="true"/>
						<Echarts class="h15" type="bar" :options="echarts[4]"/>
					</div>
				</Moudle>
			</div>
			<aside class="aside-box aside-right">
				<Moudle title="近一周产能">
					<Echarts type="line" :options="echarts[5]"/>
				</Moudle>
				<Moudle title="制浆机状态">
					<div class="gauge-box">
						<Echarts type="gauge" :options="echarts[6]"/>
						<Echarts type="gauge" :options="echarts[7]"/>
					</div>
				</Moudle>
			</aside>
		</div>
  </div>
</template>

<script>
import {dataMaper, deviceMaper} from '../mock/data/maper.js'
import {mapState} from 'vuex'
export default {
  name: 'Workshop',
	data(){
		return{
			unitId: 1,
			echarts: [],
			yieId: {},
			pos: {
				x: 0,
				z: 0
			},
			topList: [],
			nowData: []
		}
	},
	computed:{
		...mapState(['products']),
		weekDays(){
			return this.$store.getters.weekDays;
		},
		productId(){
			return this.$route.params.productId;
		},
		product(){
			if(!this.products.length) return {};
			return this.products.find((v) => v.id == this.productId);
		}
	},
	methods:{
		getTopData(){
			let arr = [],
					keys = ['jizuNum', 'jdlNum', 'todayNum'],
					keys2 = ['water', 'electric', 'material'],
					cost = this.product.cost || {};
			keys.forEach((key) => {
				let {title, unit, type} = dataMaper[key];
				arr.push({title, value: this.product[key] + unit, type});
			})
			keys2.forEach((key) => {
				let {title, unit, type} = dataMaper[key];
				arr.push({title, value: cost[key] + unit, type});
			})
			this.topList = arr;
		},
		getNowData(list){
			let nowData = list.map(({title, data}) => {
				let list = data.map((v) => {
					let {title, unit} = deviceMaper[v.type]
					return{
						title,
						value: v.value + unit
					}
				})
				return{title,list}
			})
			this.nowData = nowData;
		},
		initEcharts(){
			let xAxis = {data: this.weekDays},
					yAxis = {max: 100},
					series = [{
						areaStyle: {
							color: {
								type: 'linear',
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: '#2dffff'
								}, {
									offset: 1, color: '#2d9fff'
								}]
							}
						}
					}];
			this.yieId = {};
			this.echarts[1] = {
				xAxis,
				yAxis,
				series,
				tooltip: {
					formatter: '{c}%'
				},
				grid:{
					left: '8%'
				}
			}
			this.echarts[2] = {
				xAxis,
				yAxis:{
					axisLabel: {
						formatter:'{value} 吨'
					}
				},
				series:[{
					type: 'bar',
					name: '原材料',
					smooth: true
				},{
					type: 'bar',
					name: '电能耗',
					smooth: true
				},{
					type: 'bar',
					name: '水能耗',
					smooth: true
				}],
				tooltip: {
					trigger: 'axis',
					formatter: '',
				},
				legend: {
					left: 'left',
					top: -5,
					data: ['原材料', '电能耗', '水能耗'],
					textStyle:{
						color: '#fff'
					},
					formatter: ''
				},
				grid:{
					top: '20%'
				}
			}
			this.echarts[3] = {
				series: [{
					radius: '100%'
				}]
			}
			this.echarts[4] = {
				xAxis,
				yAxis,
				grid:{
					left: '5%'
				}
			}
			this.echarts[5] = {
				xAxis,
				series,
				tooltip: {
					trigger: 'item',
					formatter: '{b}：{c}吨'
				}
			}
			this.echarts[6] = {
				series: [{
					axisLine: {
						lineStyle: {
							color: [
								[0.25, '#0df'],
								[0.5, '#ff9'],
								[0.75, '#f80'],
								[1, '#FF6E76']
							]
						}
					},
					detail: {
						formatter: '{value}°C'
					},
					progress: {
						show: false
					}
				}]
			}
			this.echarts[7] = {
				series: [{
					detail: {
						formatter: '{value}Pa'
					},
				}],
				color: ['#FDDD60']
			}
		},
		setEcharts(val){
			this.yieId = {
				series:[{
					data: [
						{name: "成品率", value: val.yieId[1].value},
						{name: "次品率", value: val.yieId[0].value}
					]
				}]
			}
			this.echarts[1] = {
				series:[{
					data: val.yieIdWeek
				}]
			}
			this.echarts[2] = {
				series:[{
					data: val.costWeek.material
				},{
					data: val.costWeek.electric
				},{
					data: val.costWeek.water
				}]
			}
			this.echarts[3] = {
				series:[{
					data: [
						{name: "完成率", value: val.complete[0]},
						{name: "未完成", value: val.complete[1]}
					]
				}]
			}
			this.echarts[4] = {
				series:[{
					data: val.completeWeek
				}]
			}
			this.echarts[5] = {
				series: [{
					data: val.weekNums
				}]
			}
			this.echarts[6] = {
				series: [{
					data: [{
						name: '模台温度',
						value: 30
					}]
				}]
			}
			this.echarts[7] = {
				series: [{
					data: [{
						name: '空气压力',
						value: 40
					}]
				}]
			}
		},
		autoCar(){
			setTimeout(() => {
				this.pos = {
					...this.pos,
					x: 54
				};
			}, 1000)
			setTimeout(() => {
				this.pos = {
					...this.pos,
					z: 90
				};
			}, 5000)
			setTimeout(() => {
				this.pos = {
					...this.pos,
					x: 104
				};
			}, 6000)
			setTimeout(() => {
				this.pos = {
					...this.pos,
					x: 300
				};
			}, 10000)
		}
	},
	watch:{
		// 根据工厂信息的刷新，设置顶部数据，设置图表数据
		product(val){
			this.getTopData();
			this.getNowData(val.units);
			
			this.initEcharts();
			this.$nextTick(() => {
				this.setEcharts(val);
			})
		}
	},
	components: {
		PatchBox: () => import('@/components/global/PatchBox'),
		AGV: () => import('@/components/global/AGV')
	},
	created() {
		this.$store.dispatch('request', {url: '/mock/workshops', name: 'workshops'});
		this.$store.dispatch('request', {url: '/mock/products', name: 'products'});
		this.autoCar();
	}
}
</script>

<style scoped lang="less">
.gauge-box{
	display: flex;
	height: 22vh;
}
</style>